<template>
	<div style="position: relative;">
		<div style="width: 100%;height: 87vh;" id="amap" class="mymap">
		</div>

		<div>
			<div :style="drawBtnStyle" @click="changeBtn">
				<i :class="drawBtnIcon" style="color: #fff;"></i>
			</div>
			<el-drawer v-if="drawer" :visible.sync="drawer" :direction="direction" :modal="false"
				:modal-append-to-body="false" :append-to-body="false" :style="drawStyle" :wrapperClosable="false"
				class="my-draw" :show-close="false" :withHeader="false">
				<left-container @on-selected="selectNode" @video-list="getVideoList"
					@search-video-param="getSearchParam"></left-container>
			</el-drawer>

		</div>

		<div v-if="videoFrame.show"
			:style="{position: 'absolute',top: '0px',left: videoFrame.left+'vw',width: videoFrame.width+'vw',height: videoFrame.height+'vh','z-index':111,background:'#fff'}">
			<div style="width: 100%;display: flex;justify-content: end;">
				<i class="el-icon-full-screen" />
			</div>

			<video ref="videoPlayer" controls autoplay style="width: 100%;height: 97%;"></video>

		</div>

		<div>
			<div :style="bottomdraw.btn.style" @click="changeBottom">
				<i :class="bottomdraw.btn.icon" style="color: #fff;"></i>
			</div>
			<el-drawer v-if="bottomdraw.show" :visible.sync="bottomdraw.show" :direction="bottomdraw.direction"
				:modal="false" :modal-append-to-body="false" :append-to-body="false" :style="bottomdraw.style"
				:wrapperClosable="false" class="bottom-draw" :show-close="false" :withHeader="false">

				<lssp-table :sourceTableData.sync="tableData" @on-selected-row="selectRow"
					:searchVideoParam.sync="searchVideoParam" />

			</el-drawer>

		</div>

	</div>
</template>

<script>
	import { ZXWS_WEB_SERVER_IP, ZXWS_WEB_SERVER_PORT, ZXWS_VIDEO_SERVER_PORT } from '@/config/env';
	import AMapLoader from '@amap/amap-jsapi-loader';
	import {
		mapState,
		mapMutations
	} from "vuex";
	import leftContent from './left/left-container.vue'
	import lsspTable from './bottom/lssp-table.vue'
	import {getHistory} from '@/api/cljk.js'
	import mapCarRun from "@/assets/images/cljk/map-car-run.png";
	
	export default {
		components: {
			'left-container': leftContent,
			'lssp-table': lsspTable
		},
		computed: {
			...mapState("GlobalStore", [
				"isCollapseLeftMenu",
				"globalLeftMenuTree",
			]),
		},
		watch: {
			isCollapseLeftMenu: function(val) {
				if (val) {
					if (this.drawer) {
						this.bottomdraw.style.width = '65vw'
					} else {
						this.bottomdraw.style.width = '85vw'
					}

				} else {
					if (this.drawer) {
						this.bottomdraw.style.width = '76vw'
					} else {
						this.bottomdraw.style.width = '96vw'
					}
				}
			}
		},

		data() {
			return {
				zxws_web_server_ip:ZXWS_WEB_SERVER_IP,
				zxws_web_server_port:ZXWS_WEB_SERVER_PORT,
				zxws_video_server_port:ZXWS_VIDEO_SERVER_PORT,
				bottomdraw: {
					show: true,
					direction: 'btt',
					style: {
						position: 'absolute',
						width: '65vw',
						height: '19vh',
						left: '21vw'
					},
					fullBtn: {
						num: 0
					},
					btn: {
						icon: 'el-icon-bottom',
						style: {
							width: '30px',
							height: '30px',
							position: 'absolute',
							bottom: '20vh',
							left: '60vw',
							'z-index': 111,
							'text-align': 'center',
							background: 'rgba(0,0,0,0.3)',
							'border-radius': '50%',
							'align-items': 'center',
							display: 'flex',
							'justify-content': 'center'
						}
					}
				},
				drawStyle: {
					position: 'absolute',
					width: '20vw',
					'height': '86vh',
				},
				map: null,
				cluster: null,
				selectedNodes: null,
				infoWindow: null,
				pointers: [],
				videoFrame: {
					show: true,
					left: 21,
					width: 40,
					height: 66
				},
				drawer: true,
				direction: 'ltr',
				drawBtnIcon: 'el-icon-d-arrow-left',
				drawBtnStyle: {
					width: '30px',
					height: '30px',
					position: 'absolute',
					top: '42px',
					left: '20vw',
					'z-index': 111,
					'text-align': 'center',
					background: 'rgba(0,0,0,0.3)',
					'border-radius': '50%',
					'align-items': 'center',
					display: 'flex',
					'justify-content': 'center'
				},

				tableData: [],
				searchVideoParam: null,
				routeInfo: [],
				marker:null,
				carWindow:null,
				lineArr:[],
				passedPolyline:null
			}
		},

		methods: {
			initializePaths(paths) {
				var line;
				var pathLngLatArray = new Array();
				if (paths) {
					for (var i = 0; i < paths.length; i++) {
						pathLngLatArray.push(new AMap.LngLat(paths[i].lng, paths[i].lat));
					}
					line = new AMap.Polyline({
						map: this.map,
						path: pathLngLatArray,
						strokeColor: 'red',
						strokeOpacity: 0.8,
						strokeWeight: 6,
						strokeStyle: 'solid'
					});
					line.setMap(this.map);
				}
				return line;
			},
			getSearchParam(p) {
				this.searchVideoParam = p
				console.log(p)
				getHistory({
					startTime: p.startTime,
					endTime: p.endTime,
					vehId: p.vehId
				}).then(res=>{
					if(res.code===200){
						this.map.clearMap();
						
						this.routeInfo = res.data
						if (this.routeInfo.length === 0) {
							this.$message({
								message: '该时段无定位数据',
								type: 'warning'
							});
							return
						}
						this.marker = new AMap.Marker({
							map: this.map,
							position: [this.routeInfo[0].lng, this.routeInfo[0].lat],
							icon: new AMap.Icon({
								image: mapCarRun,
								size: new AMap.Size(22, 28), //图标所处区域大小
								imageSize: new AMap.Size(22, 28) //图标大小
							}),
							autoRotation: true,
							offset: new AMap.Pixel(-26, -13),
							angle: 0,
						});
						this.map.add(this.marker)
						
						this.carWindow = new AMap.InfoWindow({
							offset: new AMap.Pixel(6, -25),
							content: ""
						});
						
						var pathPolyline = this.initializePaths(this.routeInfo);
						this.lineArr = []
						
						for (var i = 0; i < res.data.length; i++) {
							var lng = res.data[i].lng
							var lat = res.data[i].lat
						
							this.lineArr.push(
								[lng, lat]
							)
						}
						
						this.passedPolyline = new AMap.Polyline({
							map: this.map,
							path: this.lineArr,
							strokeColor: "#AF5", //线颜色
							strokeOpacity: 1, //线透明度
							strokeWeight: 6, //线宽
							strokeStyle: "solid" //线样式
						});
						
						this.map.add(this.passedPolyline)
						
						// 7.打开速度框
						this.carWindow.open(this.map, this.marker.getPosition());
						
						this.map.setFitView();
						
					}
				})
				
				
				
			},
			selectRow(p) {
				this.$refs.videoPlayer.src = 'http://'+this.zxws_web_server_ip+':'+this.zxws_web_server_port+'/videos/' + p.storagePath;
			},
			getVideoList(p) {
				this.tableData = p
			},

			changeBottom() {
				this.bottomdraw.fullBtn.num = 0
				if (this.bottomdraw.show) {
					this.bottomdraw.btn.icon = 'el-icon-top'
					this.bottomdraw.btn.style.bottom = '1vh'
					this.bottomdraw.show = false
					this.videoFrame.height = 86
				} else {
					this.bottomdraw.btn.style.bottom = '20vh'
					this.bottomdraw.btn.icon = 'el-icon-bottom'
					this.bottomdraw.style.height = '19vh'
					this.videoFrame.height = 66
					this.bottomdraw.show = true
				}
			},

			selectNode(param) {

			},

			changeBtn() {

				if (this.drawer) {
					this.drawBtnIcon = 'el-icon-d-arrow-right'
					this.drawBtnStyle.left = '0vw'
					this.bottomdraw.style.left = '1vw'
					if (this.isCollapseLeftMenu) {
						this.bottomdraw.style.width = '85vw'
					} else {
						this.bottomdraw.style.width = '96vw'
					}

					this.videoFrame.left = 1
					this.videoFrame.width = 45
					this.drawer = false

				} else {
					this.drawBtnIcon = 'el-icon-d-arrow-left'
					this.drawBtnStyle.left = '20vw'
					this.bottomdraw.style.left = '21vw'
					if (this.isCollapseLeftMenu) {
						this.bottomdraw.style.width = '65vw'
					} else {
						this.bottomdraw.style.width = '76vw'
					}
					this.videoFrame.left = 21
					this.videoFrame.width = 40
					this.drawer = true
				}
			},

			initMap() {
				AMapLoader.load({
					key: "64a2876c96c2199296e28d0bdd64d43a", //此处填入我们注册账号后获取的Key
					version: "2.0", //指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
					plugins: ['AMap.ToolBar', // 缩放按钮
						'AMap.Scale', // 比例尺
						'AMap.DragRoute', // 拖拽点图
						'AMap.Driving', // 导航
						'AMap.MarkerCluster', // 点聚合
					], //需要使用的的插件列表，如比例尺'AMap.Scale'等
				}).then((AMap) => {
					this.map = new AMap.Map("amap", { //设置地图容器id
						viewMode: "3D", //是否为3D地图模式
						zoom: 5, //初始化地图级别
						center: [105.602725, 37.076636], //初始化地图中心点位置
					});
					this.map.addControl(new AMap.ToolBar())
					this.map.addControl(new AMap.Scale())


				}).catch(e => {
					console.log(e);
				})
			},
		},
		mounted() {
			this.initMap()
			var val = this.isCollapseLeftMenu

			if (val) {
				if (this.drawer) {
					this.bottomdraw.style.width = '65vw'
				} else {
					this.bottomdraw.style.width = '85vw'
				}

			} else {
				if (this.drawer) {
					this.bottomdraw.style.width = '76vw'
				} else {
					this.bottomdraw.style.width = '96vw'
				}
			}
		}

	}
</script>

<style lang="scss">
	video {
		object-fit: fill;
	}
</style>